<!doctype html>
<html lang="en">
{% include head.html %}

<body>
    {% include top.html %}
    <div>
        <div class="container">
            <div id="documentation-container" class="row">
                <div class="col-md-2 d-none d-md-block">
                    <div id="sidebar-left-container" class="flex1 flex-right">
                        <div id="sidebar-left">
                            <div>{% include link name="Introduction" path="/about/" %}</div>
                            <hr>
                            <div>{% include link name="Examples" path="/about/examples" %}</div>
                            <div>{% include link name="Download" path="/download" %}</div>
                            <hr>
                            <div>{% include link name="Processing with p5.js" path="/about/processing" %}</div>
                            <hr>
                            <div>{% include link name="FAQ" path="/about/faq" %}</div>
                            <div>{% include link name="License" path="/about/license" %}</div>
                            <div>{% include link name="Issues" path="/about/issues" %}</div>
                            <div>{% include link name="Contact" path="/about/contact" %}</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-7">
                    <div id="content">
                        {{ content }}
                        <p>&nbsp;
                        <p>
                    </div>
                </div>
                <div class="col-md-3 d-none d-md-block">
                    <div id="sidebar-right-container" class="flex1">
                        <div id="sidebar-right">
                            <!-- this column unused in this layout -->
                        </div>
                    </div>
                </div>
            </div>
            <div id="bottom-container" class="row">
                <div class="col d-block d-md-none bottom-nav">
                    <table class="table">
                        <tbody>
                            <tr>
                                <td class="nav-item">{% include link name="Introduction" path="/about/" %}</td>
                                <td class="nav-item">{% include link name="Examples" path="/about/examples" %}</td>
                            </tr>
                            <tr>
                                <td class="nav-item">{% include link name="Download" path="/download" %}</td>
                                <td class="nav-item">{% include link name="Processing with p5.js" path="/about/processing" %}</td>
                            </tr>
                            <tr>
                                <td class="nav-item">{% include link name="FAQ" path="/about/faq" %}</td>
                                <td class="nav-item">{% include link name="License" path="/about/license" %}</td>
                            </tr>
                            <tr>
                                <td class="nav-item">{% include link name="Issues" path="/about/issues" %}</td>
                                <td class="nav-item">{% include link name="Contact" path="/about/contact" %}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
</body>

</html>